<template>
    <div>
        <el-card class="box-card">
            <div slot="header" class="clearfix">
                <span>活动详情</span>
                <el-button style="float: right; padding: 3px 0" type="text" @click="goBack">返回</el-button>
            </div>
            <div>
                <el-form ref="searchForm" :inline="true" label-suffix="" label-width="100px"
                         size="small" label-position="left">
                    <el-row>
                        <el-col>
                        </el-col>
                    </el-row>
                </el-form>
            </div>
            <el-descriptions title="" direction="vertical" :column="10" border size="small">
                <el-descriptions-item label="平台">
                    {{ taskDetail.platform }}
                </el-descriptions-item>
                <el-descriptions-item label="名称">
                    {{ taskDetail.name }}
                </el-descriptions-item>
                <el-descriptions-item label="门店">
                    {{ taskDetail.shopName }}
                </el-descriptions-item>
                <el-descriptions-item label="开始日期">
                    {{ taskDetail.startDate }}
                </el-descriptions-item>
                <el-descriptions-item label="结束日期">
                    {{ taskDetail.endDate }}
                </el-descriptions-item>
            </el-descriptions>
            <el-descriptions title="" direction="vertical" :column="10" border size="small">
                <el-descriptions-item label="活动说明">
                    {{ taskDetail.description }}
                </el-descriptions-item>
            </el-descriptions>
        </el-card>
        <el-divider></el-divider>
        <el-tabs type="card" v-model="activeName">
            <el-tab-pane label="报名数据" name="applyData">
                <kol-task ref="kolTask" :task-id="id" :task-name="taskDetail.name" :platform="taskDetail.platform"
                          mode="MERCHANT"></kol-task>
            </el-tab-pane>
            <el-tab-pane label="品牌白名单" name="blackList">
                <kol-brand id="blackList" :task-id="id" :task-name="taskDetail.name"
                           type="WHITE"></kol-brand>
            </el-tab-pane>
            <el-tab-pane label="品牌黑名单" name="whiteList">
                <kol-brand id="whiteList" :task-id="id" :task-name="taskDetail.name"
                           type="BLACK"></kol-brand>
            </el-tab-pane>
        </el-tabs>
    </div>
</template>

<script>
import {getTaskById} from '@/api/api'
import KolTask from "@/component/k/KolTask";
import KolBrand from "@/component/k/KolBrand";

export default {
    name: "taskDetail",
    components: {KolTask, KolBrand},
    data() {
        return {
            // KOL详情
            taskDetail: {},
            // 唯一ID
            id: '',

            activeName: 'applyData',
        }
    },
    methods: {
        getData() {
            getTaskById({"id": this.id}).then(data => {
                this.taskDetail = data.body;
            })
        },
        goBack() {
            // 编程式导航
            this.$router.go(-1);
        },
    },
    created() {
        this.id = this.$route.query.id;
        this.getData();
    },
}
</script>

<style scoped>
.el-input {
    width: 150px !important;
}

.el-select {
    width: 150px !important;
}
</style>
